<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">研学报名审批</a>
            <a>
              <cite>报名列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body layui-form ">

                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" id="username" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
                        </div>
                    <div class="layui-inline layui-show-xs-block layui-input-inline">
                        <select name="checked">
                            <option value="">是否审核</option>
                            <option value="0">未审核</option>
                            <option value="1">已审核</option>
                            <option value="2">审核未通过</option>

                        </select>
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>
                </div>

                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>

                </div>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">审核</a>
                </script>
            </div>
        </div>
    </div>
</div>

<div id="div_test" class="layui-bg-gray" style="width:60%;padding: 30px;display: none; position: absolute;left: 25%; top:100px" >
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">审核活动</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结果</label>
                            <div class="layui-input-block">
                                <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="通过|不通过">
                                <input type="text" id="code" name="id" hidden>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text" id="desc">
                            <label class="layui-form-label">原因：</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                <button type="button" class="layui-btn layui-btn-normal" onclick="disappeare()">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
    layui.use(['laydate','form','table'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        table.render({
            elem: '#test'
            , url: '/admin/app?opr=list'
            , toolbar: true
            , title: '报名数据表'
            , id: 'applytable'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 80, unresize: true, sort: true, totalRowText: '合计行'}
                , {field: 'uName', title: '活动名称', width: 150, edit: 'text'}

                , {
                    field: 'apply_time',
                    title: '活动时间',
                    width: 150,
                    edit: 'text',
                    sort: true,
                    templet: "<div>{{layui.util.toDateString(d.apply_time, 'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {field: 'sname', title: '报名人', width: 100, sort: true, totalRow: true}
                , {field: 'phone', title: '联系方式', width: 100, sort: true, totalRow: true}
                , {
                    field: 'applicationTime',
                    title: '报名时间',
                    width: 150,
                    edit: 'text',
                    sort: true,
                    templet: "<div>{{layui.util.toDateString(d.applicationTime, 'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {field: 'achecked', title: '是否审核通过', width: 120, templet: '#checkedTpl'}
                , {field: 'checkedTime', title: '审核时间',width: 160, templet: "<div>{{layui.util.toDateString(d.checkedTime, 'yyyy-MM-dd HH:mm')}}</div>"}
                , {field: 'detail', title: '未通过原因', width: 100}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}

            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 2//只显示 1 个连续页码

            }
            , response: {
                statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data//解析数据列表
                };
            }
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
         if (obj.event === 'edit') {
             $("#code").val(data.id)
             operate()

            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked==false){
                document.getElementById('desc').style.display = 'block'
            }else {
                document.getElementById('desc').style.display = 'none'
                $("[name='desc']").val("");
            }
        });
        //监听提交
        form.on('submit(demo1)', function (data) {

            var param=  data.field
            var id= $("#code").val();
            param.id=id;
            $.getJSON("/admin/app?opr=check",param, function (data) {
                layer.msg(data)
                // 清除 未通过原因的文字数据
                $("[name='desc']").val("");
                document.getElementById('div_test').style.display = 'none'
                window.parent.location.reload();
            })
            return false;
        });
        //重新渲染表格数据
        var $ = layui.$, active = {
            reload: function () {
                // 获取条件
                var checked = $('[name="checked"]').val();
                var title = $("#username").val();

                //执行重载
                table.reload('applytable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        title: title,
                        checked:checked
                    }
                });
            }
        };
        // 按钮触发事件
        $('.layui-card .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });


    function operate() {
        document.getElementById('div_test').style.display = 'block'
        document.getElementById('desc').style.display = 'none'

        //  setTimeout('disappeare()', 2000)
    }

    function disappeare() {
        document.getElementById('div_test').style.display = 'none'
    }

</script>
<script type="text/html" id="checkedTpl">
    {{#  if(d.achecked == "0"){ }}
    <span style="color: #C9C5C5;">{{ '未审核'}}</span>
    {{#  } else if(d.achecked == "1"){ }}
    <span style="color: green;">{{ '审核通过'}}</span>
    {{#  } else if(d.achecked == "2") { }}
    <span style="color: red;">{{ '审核未通过'}}</span>
    {{#  } }}
</script>
</html>